<template>
  <div>
    <!-- 表格内容 -->
    <div class="tableList">
      <el-table :data="tableData" border style="width: 96%">
        <el-table-column prop="sortNum" label="序号" align="center" width="80"></el-table-column>
        <el-table-column prop="roleNum" label="角色编号" align="center" width="100"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" align="center" width="150"></el-table-column>
        <el-table-column prop="functionRange" label="功能范围" align="center"></el-table-column>
        <el-table-column prop="updateDate" label="更新时间" align="center" width="150"></el-table-column>
        <el-table-column prop="updateAuthor" label="更新人" align="center" width="100"></el-table-column>
        <el-table-column label="操作" align="center" style="border-right: none" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="open(scope.row)">{{operator1}}</el-button>
            <span class="sline">|</span>
            <el-button @click="handleClick(scope.row)" type="text" size="small" class="stopUsing">
                {{ operator2 }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: { type: Array, default: function fn(){ return []} },
    operator1: { type: String, defult: "" },
    operator2: { type: String, defult: "" },
  },
  data() {
    return {
      title: "创建角色",
    };
  },
  methods: {
    open(param) {
      this.$store.commit("changeRuleForm",param); //点击编辑的时候传递传递对象数据
      this.$router.push({ path: "/home/editRole" }); //路由跳转
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table--border {
  margin: 0 auto;
}

/deep/.stopUsing {
  color: #f7b23e;
}
/deep/tbody {
  font-size: 12px;
}
/deep/.el-table th {
  background-color: #fafbfc;
}
.sline {
  color: #eef0f3;
  padding: 0 5px;
}
</style>